export default function TestTailwind() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-gray-800 mb-8 text-center">
          松山湖材料实验室 - 项目色卡
        </h1>
        
        {/* 主题色系 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-700 mb-6">主题色系 - 青绿色调</h2>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#359088' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Primary Darker</h3>
              <p className="text-sm text-gray-500">#359088</p>
              <p className="text-xs text-gray-400">深主题色</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#4fb5ad' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Primary Dark</h3>
              <p className="text-sm text-gray-500">#4fb5ad</p>
              <p className="text-xs text-gray-400">深色调</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center border-2 border-teal-500">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#69cac3' }}
              ></div>
              <h3 className="font-bold text-teal-700">Primary</h3>
              <p className="text-sm text-teal-600 font-medium">#69cac3</p>
              <p className="text-xs text-teal-500">主题色 ⭐</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#8dd8d2' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Primary Light</h3>
              <p className="text-sm text-gray-500">#8dd8d2</p>
              <p className="text-xs text-gray-400">浅色调</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#b1e5e1' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Primary Lighter</h3>
              <p className="text-sm text-gray-500">#b1e5e1</p>
              <p className="text-xs text-gray-400">最浅色调</p>
            </div>
          </div>
        </div>

        {/* 辅助色系 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-700 mb-6">辅助色系</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#c369ca' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Secondary</h3>
              <p className="text-sm text-gray-500">#c369ca</p>
              <p className="text-xs text-gray-400">紫色辅助</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#69a3ca' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Accent</h3>
              <p className="text-sm text-gray-500">#69a3ca</p>
              <p className="text-xs text-gray-400">蓝色强调</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#69ca7b' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Success</h3>
              <p className="text-sm text-gray-500">#69ca7b</p>
              <p className="text-xs text-gray-400">成功绿色</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4 text-center">
              <div 
                className="w-full h-20 rounded-lg mb-3"
                style={{ backgroundColor: '#caa869' }}
              ></div>
              <h3 className="font-semibold text-gray-700">Warning</h3>
              <p className="text-sm text-gray-500">#caa869</p>
              <p className="text-xs text-gray-400">警告橙色</p>
            </div>
          </div>
        </div>

        {/* 建议的渐变色组合 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-700 mb-6">建议的渐变色组合</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-br from-teal-400 via-teal-500 to-cyan-600"></div>
              <h3 className="font-semibold text-gray-700">主题渐变 1</h3>
              <p className="text-sm text-gray-500">from-teal-400 via-teal-500 to-cyan-600</p>
              <p className="text-xs text-gray-400">推荐用于背景</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-br from-teal-500 via-emerald-500 to-teal-600"></div>
              <h3 className="font-semibold text-gray-700">主题渐变 2</h3>
              <p className="text-sm text-gray-500">from-teal-500 via-emerald-500 to-teal-600</p>
              <p className="text-xs text-gray-400">温和的绿色调</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-br from-slate-800 via-teal-700 to-slate-900"></div>
              <h3 className="font-semibold text-gray-700">深色主题</h3>
              <p className="text-sm text-gray-500">from-slate-800 via-teal-700 to-slate-900</p>
              <p className="text-xs text-gray-400">适合登录页背景</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-br from-teal-50 via-cyan-50 to-emerald-50"></div>
              <h3 className="font-semibold text-gray-700">浅色主题</h3>
              <p className="text-sm text-gray-500">from-teal-50 via-cyan-50 to-emerald-50</p>
              <p className="text-xs text-gray-400">适合内容背景</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-r from-teal-300 to-blue-300"></div>
              <h3 className="font-semibold text-gray-700">文字渐变</h3>
              <p className="text-sm text-gray-500">from-teal-300 to-blue-300</p>
              <p className="text-xs text-gray-400">适合标题文字</p>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-4">
              <div className="h-32 rounded-lg mb-4 bg-gradient-to-br from-teal-400 to-blue-500"></div>
              <h3 className="font-semibold text-gray-700">按钮渐变</h3>
              <p className="text-sm text-gray-500">from-teal-400 to-blue-500</p>
              <p className="text-xs text-gray-400">适合按钮背景</p>
            </div>
          </div>
        </div>

        {/* 色彩搭配建议 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-700 mb-6">色彩搭配建议</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow-lg p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">登录页面配色</h3>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-slate-800"></div>
                  <span className="text-sm">背景深色：slate-800</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-teal-500"></div>
                  <span className="text-sm">主要元素：teal-500</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-white border"></div>
                  <span className="text-sm">表单背景：white</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-teal-300"></div>
                  <span className="text-sm">装饰元素：teal-300</span>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-lg shadow-lg p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">管理后台配色</h3>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-gray-50"></div>
                  <span className="text-sm">页面背景：gray-50</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded" style={{ backgroundColor: '#69cac3' }}></div>
                  <span className="text-sm">主题色：#69cac3</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-white border"></div>
                  <span className="text-sm">卡片背景：white</span>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 rounded bg-gray-600"></div>
                  <span className="text-sm">文字颜色：gray-600</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 实际效果预览 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-700 mb-6">实际效果预览</h2>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* 按钮预览 */}
            <div className="bg-white rounded-lg shadow-lg p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">按钮样式</h3>
              <div className="space-y-4">
                <button className="w-full py-3 px-4 bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-lg font-medium hover:from-teal-600 hover:to-cyan-600 transition-all duration-300">
                  主要按钮
                </button>
                <button className="w-full py-3 px-4 border-2 border-teal-500 text-teal-600 rounded-lg font-medium hover:bg-teal-50 transition-all duration-300">
                  次要按钮
                </button>
                <button className="w-full py-3 px-4 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg font-medium hover:from-green-600 hover:to-green-700 transition-all duration-300">
                  成功按钮
                </button>
              </div>
            </div>
            
            {/* 卡片预览 */}
            <div className="bg-white rounded-lg shadow-lg p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">卡片样式</h3>
              <div className="space-y-4">
                <div className="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg p-4 border border-teal-100">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">✓</span>
                    </div>
                    <div>
                      <h4 className="font-medium text-teal-800">信息卡片</h4>
                      <p className="text-sm text-teal-600">这是一个信息提示卡片</p>
                    </div>
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-100">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">i</span>
                    </div>
                    <div>
                      <h4 className="font-medium text-blue-800">提示卡片</h4>
                      <p className="text-sm text-blue-600">这是一个提示信息卡片</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 